<template>
	<section>
		<el-form :inline="true" :model="formInline" class="demo-form-inline">
			<el-form-item label="用户">
				<el-input v-model="formInline.user_name" placeholder="手机号/用户名"></el-input>
			</el-form-item>
			<el-form-item label="用户状态">
				<el-select v-model="formInline.status" placeholder="用户状态">
					<el-option label="全部" value=""></el-option>
					<el-option label="启用" value="1"></el-option>
					<el-option label="禁用" value="2"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item >
				<el-button type="primary" @click="onSubmit">查询</el-button>
				<el-button type="primary" @click="toAdd">新增</el-button>
			</el-form-item>
		</el-form>

		<el-table :data="tableData" border style="width: 100%" v-loading="searchLogining" height="500">
			<el-table-column fixed prop="id" label="ID" width="80"></el-table-column>
			<el-table-column prop="head_img" label="头像" width="80">
				<template slot-scope="scope">
					<img style="border: 1px solid #CCC;border-radius: 50%;vertical-align: bottom;" :src="scope.row.head_img" width="30" height="30" @click="OpenDialog(scope.row.head_img)">
				</template>
			</el-table-column>
			<el-table-column prop="user_name" label="用户名" width="120"></el-table-column>
			<el-table-column prop="phone" label="手机号" width="120"></el-table-column>
			<el-table-column prop="role_names" label="角色" width="200"></el-table-column>
			<el-table-column prop="status" label="状态" width="120">
				<template slot-scope="scope">
					<el-switch
                        v-model="scope.row.status"
                        active-value="1"
                        inactive-value="2"
                        disabled>
                	</el-switch>
				</template>
			</el-table-column>

			<el-table-column prop="add_time" label="添加时间" style="min-width: 250px;"> </el-table-column>

			<el-table-column fixed="right" label="操作" width="120">
				<template slot-scope="scope">
					<el-button type="primary" size="small" @click="toEdit(scope.row, scope.$index)">编辑</el-button>
				</template>
			</el-table-column>
		</el-table>

		<el-pagination 
			@current-change="handleCurrentChange"
            @size-change="handleSizeChange"
			:total="page.total"
			:page-size="page.size"
			:page-sizes="[10, 50, 100, 200]"
			:current-page="page.current_page"
			layout="total, sizes, prev, pager, next, jumper">
		</el-pagination>

		<el-dialog title="图片预览" :visible.sync="showImgDialog" size="tiny" custom-class="DialogImg">
            <div class="grid-content bg-purple">
                <img :src="dialog_img"  style="width: 100%;height: 100%: max-height:500px;">
            </div>
        </el-dialog>

        <el-dialog :title="formDialogTitle" :visible.sync="isFormDialog" width="800px">
			<!-- v-if主要是为了防止第一次加载之后不再重新加载，这边判断显示后直接重新载入 -->
            <components is="userForm" v-if="isFormDialog" :user_id="user_id" @closeDialog="closeDialog"></components>
        </el-dialog>

	</section>
</template>

<script>
import userForm from './userForm.vue';
export default {
	data() {
	     return {
	     	edit_index:0,
	     	page:{
	     		total:0,
	     		size:10,
	     		current_page:1
	     	},
	      	formInline: {
	          	user_name: '',
	          	status: ''
	        },
	        tableData: [],
	        searchLogining:false,
	        showImgDialog:false,
	        dialog_img:'',
	        //添加，编辑
	        isFormDialog:false,
	    	formDialogTitle:'添加用户',
	    	user_id:0
	    }
    },components:{
        userForm
    },methods: {
    	toEdit(row){
    		//编辑用户
    		this.user_id = row.id;
    		this.isFormDialog = true;
    		this.formDialogTitle = '编辑用户';
    	},toAdd(){
    		//新增用户
    		this.user_id = 0;
    		this.isFormDialog = true;
    		this.formDialogTitle = '新增用户';
    	},OpenDialog( img ){
    		//打开图片预览
            this.dialog_img = img;
            this.showImgDialog = true;
        },closeDialog(){
        	//关闭新增编辑窗口
        	this.isFormDialog=false;
			this.getList();
        },handleCurrentChange(page){
        	//切换分页
    		this.page.current_page = page;
    		this.getList();
    	},handleSizeChange(size){
    		//改变每页数量
    		this.page.size = size;
    		this.getList();
    	},onSubmit(){
    		//查询
        	this.getList();
      	},getList(){
      		//获取用户列表
			var url = '/admin/user/getLists';
            var token = this.Common.cookie('token');
            var data = this.formInline;
            data.token = token;
            data.size = this.page.size;
            data.page = this.page.current_page;
            var tar = this;
            tar.searchLogining = true;
			tar.Common.request(url, data, function(data){
	        	tar.searchLogining = false;
	        	if(data.success_code==0){
	        		tar.$message({
						title: '警告',
						message: data.message,
						type: 'error'
					});
	        	}else{
	        		tar.tableData = data.result.data;
	        		tar.page.total = data.result.total;
	        		tar.page.current_page = data.result.current_page;
	        	}
	        },function(data){
	        	var message = '接口请求失败';
	        	if(data.message){
	        		message = data.message;
	        	}
	        	tar.searchLogining = false;
				tar.$message({
					title: '警告',
					message: message,
					type: 'error'
				});
	        },this);
		}
    },mounted(){
		//获取用户信息
		this.getList();
	}
}
</script>